<template>
  <h3>侦听器</h3>
  <p>num: {{ num }}</p>
  <button @click="fn">num++</button>
  <button @click="id++">{{ id }}</button>
</template>

<script setup>
import { ref, watch, watchEffect } from "vue";

const num = ref(1);
const fn = () => {
  num.value++;
};

// watch也是一个函数
// 里面是三个参数
// 要侦听的变量，回调函数，描述对象
watch(
  num,
  (val, oldVal) => {
    console.log("num改变了" + val + "," + oldVal);
  },
  { immediate: true, once: true, deep: true }
);

const id = ref(1);
// watch(
//   id,
//   (val) => {
//     console.log(val);
//   },
//   { immediate: true }
// );

// watchEffect可以不需要指定监听哪个变量
// 用到的变量都会监听
// 不需要加immediate: true，进页面就会先执行一次
watchEffect(() => {
  console.log(id.value);
  console.log(num.value);
});
</script>
